<template>
  <div class="wrapper">
    <Header :title="title" :back="back"></Header>
    <!--<div class="title">-->
    <!--<router-link to ="/Words">返回</router-link>-->
    <!--</div>-->

    <p class="title">录入新单词</p>
    <div class="section">
      <ul>
        <li>
          <span>单词</span>
          <input type="text" v-model="newWord.word" placeholder="请输入一个单词" class="text1" />
        </li>
        <li>
          <span>发音</span>
          <input type="text" v-model="newWord.pronounce" placeholder="请输入此单词的发音" class="text1" />
        </li>
        <li>
          <span>中文</span>
          <input type="text" v-model="newWord.description" placeholder="请输入汉语意思" class="text1" />
        </li>
        <li>
          <span>词性</span>
          <input type="text" v-model="newWord.wordtype" placeholder="请输入单词性质" class="text1" />
        </li>
      </ul>
    </div>
    <button v-on:click="addWord(newWord)" class="button1">确认添加</button>
  </div>
</template>

<script>
import Header from "../header/header";
export default {
  name: "AddWord",
  components: {
    Header
  },
  data() {
    return {
      newWord: {
        word: "",
        pronounce: "",
        description: "",
        wordtype: ""
      },
      title: "添加新单词",
      back: "/Words"
    };
  },
  methods: {
    addWord: function(newWord) {
      console.log(newWord.word);
      if (newWord.word == "") {
        alert("输入的单词不能为空！");
      } else if (newWord.description == "") {
        alert("输入的中文意思不能为空！");
      } else if (newWord.pronounce == "") {
        alert("输入的单词发音不能为空！");
      } else if (newWord.wordtype == "") {
        alert("输入的词性不能为空！");
      } else {
        this.$http
          .jsonp(
            "http://app.sencha.com.cn/soya/apps/testdb/server/?action=wordList.insert&word=" +
              newWord.word +
              "&pronounce=" +
              newWord.pronounce +
              "&wordtype=" +
              newWord.wordtype +
              "&memberId=100&description=" +
              newWord.description,

            {
              //请求参数
            }
          )
          .then(
            function(res) {
              // console.log(res);
              //	console.log(res.data);
              if (res.data.ret == 0) {
                alert("添加成功！");
                this.$router.push({
                  path: "/words"
                });
              } else {
                alert("添加失败！");
              }
            },
            function(error) {
              //console.log(1);
              console.log(error);
            }
          );
      }
    }
  }
};
</script>


<style scoped>
.wrapper {
  margin-top: 55px;
  text-align: left;
}
.title {
  padding-left: 23px;
  margin-bottom: 10px;
  color: #999;
}
.section {
  background: #ffffff;
  padding: 0 23px;
}
.section li {
  height: 55px;
  line-height: 55px;
  border-bottom: 1px #eee solid;
  font-size: 16px;
}
.section input {
  border: none;
  margin-left: 16px;
  font-size: 14px;
}
.button1 {
  border: 0;
  background: #0bcdf0;
  border-radius: 3px;
  height: 42px;
  width: calc(100% - 66px);
  margin: 80% 33px 10% 33px;
  font-size: 16px;
  font-weight: bold;

  color: #ffffff;
}
</style>
